<!--
  1、computed 属性的get，set方法的应用
  2、watch 的深度监听
  3、自定义指令 directives
-->
<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        placeholder="What needs to be done?"
        autofocus
        @keyup.enter="addItem">
    </header>
    <div v-show="todoList.length">
      <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" v-model="selectedAll">
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <li
            v-for="(item, i) in list"
            :key="i"
            :class="{'completed': item.selected, 'editing': currentItem === item}"
            @dblclick="dblClick(item)"
            >
            <div class="view">
              <input class="toggle" type="checkbox" v-model="item.selected">
              <label>{{item.content}}</label>
              <button
                class="destroy"
                @click="delList(item)"
                ></button>
            </div>
            <input
              class="edit"
              v-focus="currentItem === item"
              v-model="item.content"
              @keyup.enter.stop.prevent="editEnter(item)"
              @keyup.esc="editEsc(item)"
              @blur="editEsc(item)"
              >
          </li>
        </ul>
      </section>
      <footer class="footer">
        <span class="todo-count"><strong>{{completedCount}}</strong> item left</span>
        <ul class="filters">
          <li v-for="item in stateList" :key="item">
            <a :class="{selected: item === currentState}" @click.stop.prevent="currentState = item">{{item}}</a>
          </li>
        </ul>
        <button class="clear-completed" v-show="selectedSome" @click="clearCompleted">Clear completed</button>
      </footer>
    </div>
  </section>
</template>
<script>
export default {
  name: 'todomvc',
  data () {
    return {
      todoList: JSON.parse(window.localStorage.getItem('todoList') || '[]'),
      oldItem: {},
      currentItem: {},
      stateList: ['All', 'Active', 'Completed'],
      currentState: window.localStorage.getItem('currentState') || 'All'
    }
  },
  methods: {
    addItem (e) {
      if (!e.target.value) {
        return
      }
      let last = this.todoList[this.todoList.length - 1]
      this.todoList.push({
        id: last ? last.id + 1 : 1,
        content: e.target.value,
        selected: false
      })
      e.target.value = ''
    },
    delList (item) {
      this.todoList.forEach((t, i) => {
        if (t.id === item.id) {
          this.todoList.splice(i, 1)
        }
      })
    },
    clearCompleted () {
      this.todoList = this.todoList.filter(t => !t.selected)
    },
    dblClick (item) {
      this.currentItem = item
      this.oldItem = {
        ...item
      }
    },
    editEnter (item) {
      this.oldItem = {
        ...item
      }
      this.currentItem = {}
    },
    editEsc (item) {
      item.content = this.oldItem.content
      this.currentItem = {}
    }
  },
  directives: {
    focus (el, binding) {
      if (binding.value) {
        el.focus()
      }
    }
  },
  computed: {
    selectedSome () {
      return this.todoList.some(t => t.selected)
    },
    selectedAll: {
      get () {
        return this.todoList.every(t => t.selected)
      },
      set (val) {
        this.todoList.forEach((item) => {
          item.selected = val
        })
      }
    },
    completedCount () {
      return this.todoList.filter(t => !t.selected).length
    },
    list () {
      if (this.currentState === 'All') {
        return this.todoList
      } else if (this.currentState === 'Active') {
        return this.todoList.filter(t => !t.selected)
      } else {
        return this.todoList.filter(t => t.selected)
      }
    }
  },
  watch: {
    todoList: {
      handler (arr) {
        window.localStorage.setItem('todoList', JSON.stringify(arr))
      },
      deep: true
    },
    currentState (state) {
      window.localStorage.setItem('currentState', state)
    }
  }
}
</script>
<style scoped>
  @import "../assets/css/todomvc-common.css";
  @import "../assets/css/todomvc-app.css";
</style>
